<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <script type="text/babel">

    const { useState, useEffect } = React

    function MyApp() {
      const [count, setCount] = useState(0);
      const [page, setPage] = useState(1);
      // 异步 获取外部数据（服务接口） 对已经渲染的结果进行更新
      /*
        每一次渲染完成之后（创建时）
        []只在第一次渲染的时候执行一次，之后不再执行
        [page]渲染完成并且page发生了改变，才执行

        useEffect回调函数的返回值
          可以没有，有就必须是一个回调函数(清除函数)
          执行时机：
            1、组件被销毁时
            2、第二次执行回调时，先执行上一次回调中的返回值函数

            回调函数用async修饰时，回返回一个promise对象，所以会报错

        副作用：
          外部影响内部：从外部获取数据，对内部渲染结果产生影响
          内部影响外部：从内部获取数据，对外部产生影响
      */

      useEffect(() => {
        console.log('---回调中---');
        // 连接数据库 添加监听事件 定时器
        return () => {
          // 断开数据库 移除监听事件 关闭定时器
          console.log('~~~回调中返回值函数~~~', count);
        }
      });

      console.log('---组间中---');

      return <>
        <h1 onClick={() => setCount(count + 1)}>hello, world! {count}</h1>
      </>
    }

    // 浏览器DOM对象
    const container = document.getElementById('root');
    // 浏览器DOM对象转换成reactDOM对象
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp />);

    console.log(root);

  </script>

</body>

</html>